/*
 * @Description: 车票首页的车辆信息组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:31:20
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-28 21:53:37
 */
<template>
  <div
    class="bus_main"
    @click="skipToBuyTicket"
  >
    <div class="type">
      <img :src="imgUrl">
    </div>
    <div class="name fontsize32">{{busInfo.ROUTE_NAME}}</div>
    <div class="info_area flex-h flex-hsb">
      <div class="bus_icon">
        <i class="iconfont icon-bus baseColorNoAcitve"></i>
      </div>
      <div class="station">
        <div class="station_name fontsize28">{{busInfo.START_STATION_NAME}}</div>
        <div class="station_num fontsize24">{{busInfo.VIA_STATION_COUNT|stationFilters}}</div>
        <div class="station_name fontsize28">{{busInfo.END_STATION_NAME}}</div>
      </div>
      <div class="price">
        <div class="price_area fontsize28">
          <div class="buy_title fontsize24">购票</div>
          <div class="price_num"><span class="fontsize20">￥</span><span>{{ticketPrice}}</span></div>
        </div>
      </div>
    </div>
    <div class="line">
      <i class="iconfont icon-circle start fontsize24"></i>
      <i class="iconfont icon-circle end fontsize24"></i>
    </div>
  </div>
</template>

<script>
import { priceFilters, stationFilters } from './../../filters/filters'
export default {
  name: 'bus-item',
  data() {
    return {
      imgSrc: { // 单程与往返图片存储
        oneWay: require('@wechat/img/one-way.png'),
        shuttle: require('@wechat/img/shuttle.png')
      },
      imgUrl: '', // 实际显示图片
      ticketPrice: ''
    }
  },
  props: {
    busInfo: { //  当前班线信息
      type: Object,
      default: null
    }
  },
  filters: {
    priceFilters,
    stationFilters
  },
  mounted() {
    let type = parseInt(this.busInfo.ROUTE_TYPE) > 1 ? 'shuttle' : 'oneWay' // 判断单程或往返
    this.imgUrl = this.imgSrc[type]
    this.ticketPrice = (this.busInfo.TICKET_PRICE / 100).toFixed(2)
  },
  methods: {
    skipToBuyTicket() { // 跳转至车票查询
      window.localStorage.setItem('route', JSON.stringify(this.busInfo))
      this.$router.push({ path: 'buyTicket', query: { routeName: this.busInfo.ROUTE_NAME } })
    }
  }
}
</script>

<style lang="scss" scoped>
.bus_main {
  width: 686px;
  height: 232px;
  background: #fff;
  border-radius: 4px; /*no*/
  margin: 32px;
  // margin-bottom: 34px;
  position: relative;
  .type {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 100%;
    }
  }
  .name {
    height: 80px;
    padding-left: 112px;
    line-height: 80px;
  }
  .info_area {
    height: 152px;
    .bus_icon {
      width: 100px;
      i {
        width: 100px;
        height: 126px;
        text-align: center;
        font-size: 48px;
        display: inline-block;
        line-height: 126px;
      }
    }
    .station {
      width: 446px;
      .station_name {
        height: 40px;
        line-height: 40px;
        padding-left: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .station_num {
        height: 50px;
        line-height: 50px;
        padding-left: 50px;
        color: #999;
      }
    }
    .price {
      width: 140px;
      .price_area {
        width: 108px;
        border: 1px solid #027aff; /*no*/
        text-align: center;
        .buy_title {
          background-color: #027aff;
          color: #fff;
          height: 36px;
          line-height: 36px;
        }
        .price_num {
          color: #027aff;
          span {
            height: 36px;
            line-height: 40px;
            display: inline-block;
          }
        }
      }
    }
  }
  .line {
    width: 0;
    height: 108px;
    border-left: 2px dashed #ccc;
    position: absolute;
    left: 112px;
    top: 97px;
    i {
      width: 32px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      position: absolute;
      left: -17px;
      background-color: #fff;
      display: block;
    }
    .start {
      top: -14px;
      color: #5c83ff;
    }
    .end {
      bottom: 0;
      color: #0ecce6;
    }
  }
}
</style>
